<template>
	<view class="min100">
<!--         :style="{paddingTop:blindBoxheight+'rpx'}"-->
		<view class=" plr-20" style="position: relative;z-index: 1;" >
			<view class="noticeBg" @click="toNotice">
				<image src="../../static/blindbox/noticeBg.png" mode="widthFix"></image>
			</view>
			<view class="boxDetails_bg">
				<!-- ceshi.jpg -->
				<!-- <view class="detailImg" :style="{backgroundImage: 'url(../../static/ceshi.jpg)'}"></view> -->
				<view class="detailImg" :style="{backgroundImage: 'url('+info.image+')'}"></view>
				<!-- <image class="photo" :src="image" mode=""></image> -->
				<!-- <view class="notice"></view> -->
			</view>
			<view class="diamondMall_head p20 flex-between flex1" :style="{ background: bg_color}">
				<view class="">
					<image class="ml-30" src='../../static/chip/back1.png' mode="widthFix" style="width: 40rpx;"
						@click="backmarket()"></image>
				</view>
				<view class="center detailName">
					{{info.name}}
				</view>
				<view class="">
					<image class="collection"
						:src="info.is_focus==0?'../../static/home/aixinold.png':'../../static/home/aixinnew.png'"
						v-show="showUpImg" @click="changeImg" style="width: 40rpx;height: 40rpx;">
					</image>

					<image class="collection"
						:src="info.is_focus==1?'../../static/home/aixinnew.png':'../../static/home/aixinold.png'"
						v-show="!showUpImg" @click="changeImg" style="width: 40rpx;height: 40rpx;">
					</image>
				</view>
			</view>
			<view class="">
				<view class="" style="width: 100rpx;height: 100rpx;margin: 40rpx auto; ">
					<image class="photo" :src="info.author_image" mode="width" style="border-radius: 50%;">
					</image>
				</view>
				<view class="white center">
					{{info.author_name}}
				</view>
			</view>
			<view class="">
				<view class="flex mt-30" style="justify-content: space-around;padding: 0 40rpx;">
					<view class="flex  plr-20 ptb-7">
						<view class="plr-10 size-30" style="background-color: rgb(255, 194, 134);color: #000;">限量</view>
						<view class="white size-30 plr-20 ptb-1" style="background-color: rgba(239, 170, 28, 0.3);">{{info.stock}}份</view>
					</view>
					<view class="flex  plr-20  ptb-7">
						<view class="plr-10 size-30" style="background-color: rgb(255, 194, 134);color: #000;">流通</view>
						<view class="white size-30 plr-20 ptb-1" style="background-color: rgba(239, 170, 28, 0.3);">{{info.surplus}}份</view>
					</view>
				</view>
			</view>
			<view class="" style="height: 40rpx;">

			</view>
			<view class="info_bottom">
			</view>
		</view>
		<view class="detail_sort">
			<view class="sortbox flex flex-around size-36">
				<view class="sort_item size-30" v-for="item in sortlist" @click="sortfn(item)">{{item.val}}
					<view class="line_item" v-if="item.active==true"></view>
				</view>

			</view>
			<view class="sort_cont plr-20 ptb-20">
				<view class="cont_item flex flex-between size-30 ptb-20" v-for="item in order_arr"
					@click="todetail(item)">
					<view class="cont_item_detail">
						<view class="flex flex-between">
							<view class="flex1">
								<view class="size-26">{{item.name}}</view>
								<view class="lock size-20 ml-30" v-if="item.status==3">锁定中</view>
								<view class="lockgreen size-20 ml-30" v-if="item.status==2">寄售</view>
							</view>
							<view class="">￥{{item.price}}</view>
						</view>
						<view class="flex flex-between" style="align-items: baseline;">
							<view class="flex">
								<view class="size-26 mt-20" v-if="type==0">{{item.goods_num}}</view>
								<view class="size-26 mt-20" v-if="type==1">{{item.box_num}}</view>
							</view>
							<view class="size-24 gray-2 authen_tication" v-if="type==0">认证标识：{{item.nft_id}}</view>
						</view>
					</view>
					<u-icon name="arrow-right" size="36"></u-icon>
				</view>
			</view>


		</view>

		<view class="Blockimg">
			<image src="../../static/my/jG1.png" mode="widthFix"></image>
		</view>

	</view>
</template>

<script>
	import empty from "../../components/empty.vue"
	import md5Libs from "uview-ui/libs/function/md5"; //引入md5加密方式
	export default {
		components: {
			empty,
			// md5Libs
		},
		data() {
			return {
				showUpImg:'',
				blindBoxheight:'',
				
				surplus: "",
				stock: '',
				textcolor: '0',
				bg_color: '',
				index: 0,
				order_arr: [

				],
				sortlist: [{
						val: '按价格排序',
						active: true,
						index: 0
					},
					{
						val: '按编号排序',
						active: false,
						index: 1
					},
				],
				btnDisabled: false,
				preShow: false,
				id: "",
				info: [

				],
				is_focus:'',
				page: 1,
				arr: [],
				type: ''
			}
		},
		onPullDownRefresh() {
			setTimeout(function () {
				uni.stopPullDownRefresh();
				
			}, 1000);
			this.page= 1
			this.order_arr=[]
			this.boxInfo()
			// this.getTradeGoodsList()
		},
		onLoad(options) {
			console.log(options)
			this.id = options.id;
			this.type = options.type
			this.boxInfo()
			// this.getTradeGoodsList()
			let _that = this;
			this.cheight = wx.getSystemInfoSync().windowHeight
			uni.getSystemInfo({
				success(e) {
					console.log(e.statusBarHeight, '123122222222222222222222');
					if (e.platform == "ios" || e.platform == "devtools") {
						_that.blindBoxheight = e.statusBarHeight + 45;
					} else {
						_that.blindBoxheight = e.statusBarHeight + 50;
					}
				}
			})
		},
		onReachBottom() {
			console.log(this.arr)
			if(this.arr.length==0){
			}else{
				this.page++
				this.getTradeGoodsList()
			}
			
		},
		onShow() {

		},
		// 吸顶
		// onPageScroll(e) {
		// 	let h = e.scrollTop
		// 	if (h >= 0) {
		// 		if (h <= 0) {
		// 			this.bg_color = '#FFF'
		// 			this.textcolor = '100%'
		// 		} else if (20 < h && h <= 200) {
		// 			this.bg_color = '#fff'
		// 			this.textcolor = "100%"
		// 		} else if (h > 300) {
		// 			this.bg_color = '#fff'
		// 			this.textcolor = "100%"
		// 		}
		// 	}
		// 	// console.log(this.textcolor);
		// 	//#ifdef H5
		// 	this.isF = true
		// 	// #endif
		// 	// #ifndef H5
		// 	if (this.yuanH > e.scrollTop) {
		// 		this.isF = false
		// 	} else {
		// 		this.isF = true
		// 	}
		// 	// #endif
		// },
		methods: {
			toNotice(){
				// console.log('notice',this.id,this.name)
				// uni.navigateTo({
				// 	url:'./notice?id='+this.id+'&name='+this.name
				// })
				uni.navigateTo({
					url:'../market/marketSearch?name='+this.name
				})
			},
			getTradeGoodsList(){
				const md5 = md5Libs.md5;
				if(this.type==0){
					var time = Date.parse(new Date()).toString(); //精确到毫秒
					time = time.substr(0, 10); //精确到秒
					this.$http('api/trade/tradeGoodsListNew', {
						page: this.page,
						pagesize: 10,
						search: '',
						time: time,
						time_order: '',
						price_order: 1,
						goods_id: this.id,
						// sign: md5(this.page+10+''+time+''+1+this.id)
						sign: md5(''+''+1+this.page+10+this.id+time)
					},'POST').then(res => {
						// this.order_arr = res.data
						console.log(JSON.parse(JSON.stringify(res.data)))
						let arr = JSON.parse(JSON.stringify(res.data))
						this.arr=arr
						this.order_arr = this.order_arr.concat(res.data)
						console.log(this.order_arr)
						arr.forEach((item) => {
							// console.log(item.stock);
							this.stock = item.stock
							this.surplus = item.surplus
							this.name = item.name
						})
					})
				}else{
					console.log(this.type)
					this.$http('api/trade/tradeBoxList', {
						page: this.page,
						pagesize: 10,
						search: '',
						time_order: '',
						price_order: 1,
						box_id: this.id
					}).then(res => {
						// console.log(JSON.parse(JSON.stringify(res.data)))
						let arr = JSON.parse(JSON.stringify(res.data))
						this.arr=arr
						this.order_arr = this.order_arr.concat(res.data)
						// console.log(this.order_arr)
						arr.forEach((item) => {
							// console.log(item.stock);
							this.stock = item.stock
							this.surplus = item.surplus
							this.name = item.name
						})
					})
				}
			},
			
			
			boxInfo(){
				if(this.type == 0){
					this.$http('api/orders/goodsOrderDetailNew', {
						goods_id: this.id,
						users_goods_id: ''
					}).then(res => {
						this.info=res
						console.log(this.info)
						this.getTradeGoodsList()
					})
				}else{
					this.$http('api/box/boxDetail', {
						id: this.id,
						// users_goods_id: ''
					}).then(res => {
						this.info=res
						console.log(this.info)
						this.getTradeGoodsList()
					})
				}
				
			},
			changeImg() {
				console.log(this.type);
				this.showUpImg = !this.showUpImg
				this.$http('api/user/userFocus', {
					goods_id: this.id,
					type: this.type
				}, 'POST').then(res => {
					console.log(res.msg);
					uni.showToast({
						title: res.msg,
					})
				});
				this.boxInfo()
			},
			// 按价格排序
			price() {
				console.log('按照价格排序')
				const md5 = md5Libs.md5;
				var time = Date.parse(new Date()).toString(); //精确到毫秒
				time = time.substr(0, 10); //精确到秒
				if(this.type==0){
					this.$http('api/trade/tradeGoodsListNew', {
						page: 1,
						pagesize: 10,
						search: '',
						time_order: '',
						price_order: 1,
						goods_id: this.id,
						time: time,
						sign: md5(''+''+1+1+10+this.id+time)
					},'POST').then(res => {
						this.order_arr = res.data
					})
				}else{
					this.$http('api/trade/tradeBoxList', {
						page: 1,
						pagesize: 10,
						search: '',
						time_order: '',
						price_order: 1,
						goods_id: this.id
					}).then(res => {
						this.order_arr = res.data
					})
				}
				
			},
			// 按编号排序
			number() {
				const md5 = md5Libs.md5;
				if(this.type==0){
					var time = Date.parse(new Date()).toString(); //精确到毫秒
					time = time.substr(0, 10); //精确到秒
					this.$http('api/trade/tradeGoodsListNew', {
						page: 1,
						pagesize: 10,
						search: '',
						time_order: 2,
						price_order: '',
						time: time,
						goods_id: this.id,
						sign: md5(''+2+''+1+10+this.id+time)
					},'POST').then(res => {
						this.order_arr = res.data
					})
				}else{
					this.$http('api/trade/tradeBoxList', {
						page: 1,
						pagesize: 10,
						search: '',
						time_order: 2,
						price_order: '',
						goods_id: this.id
					}).then(res => {
						this.order_arr = res.data
					})
				}
				
			},
			backmarket() {
				uni.navigateBack({
					url: '/pages/home/index'
				})
			},
			todetail(item) {
				// console.log(item.status);
				if(item.status !== 3){
					if(this.type==0){
						uni.navigateTo({
							url: '/pages/blindBox/blindListdetail?users_goods_id=' + item.users_goods_id
						})
					}else{
						uni.navigateTo({
							url: '/pages/blindBox/blindboxDetail?users_box_id=' + item.users_box_id
						})
					}
				}else{
					uni.showToast({
						icon:"none",
						title:'锁定中'
					})
				}
				
				
			},
			concern() {

			},
			sortfn(item) {
				if (item.index == 0) {
					this.price()
				} else if (item.index == 1) {
					this.number()
				}
				this.index = item.index
				for (let i = 0; i < this.sortlist.length; i++) {
					this.sortlist[i].active = false
				}
				item.active = true
			},
			// 返回
			backfn() {
				uni.navigateBack({})
			},
			// 购买
			toBuy() {
				this.btnDisabled = true;
				this.$http('api/orders/boxApply', {
					id: this.id
				}).then(res => {
					this.btnDisabled = false;
					uni.navigateTo({
						url: '../pay/boxPay?order_id=' + res.order_id
					})
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.noticeBg{
		width: 24%;
		position: absolute;
		right: 0;
		top: 240rpx;
		image{
			width: 100%;
		}
	}
	.boxDetails_bg {
		width: 100%;
		height: 420rpx;
		position: absolute;
		left: 0px;
		top: 0px;
		z-index: -1;
		.detailImg{
			width: 100%;
			height: 420rpx;
			background-repeat: no-repeat;
			background-position: center center;
			background-size: cover;
			filter: brightness(0.6);
			// opacity: .7;
			// background-blend-mode: darken;
		}
	}

	.authen_tication {
		width: 100px;
		overflow: hidden;
		text-overflow: ellipsis;
		whitewhite-space: unset;
		white-space: nowrap;
	}

	.diamondMall_head {
		// position: fixed;
		// top: 0;
		// left: 0;
		z-index: 1000;
		width: 100%;
		height: 100rpx;
		position: relative;
		align-items: center;
		top: 0;
		// background-image: #FFF;
		.detailName{
			color: #fff;
			font-size: 36rpx;
			font-weight: 600;
		}
	}

	page {
		background-color: #F5F5F5;
	}

	.Blockimg {
		margin: 40rpx auto;
		text-align: center;

		image {
			width: 260rpx;
		}
	}

	.detail_sort {
		width: 100%;

		.sortbox {
			height: 80rpx;
			line-height: 80rpx;

			.sort_item {
				.line_item {
					width: 70rpx;
					margin: 0 auto;
					border: 5rpx solid rgb(0, 224, 231);
				}
			}
		}

		.line {
			.line_item {
				width: 70rpx;
				border: 5rpx solid rgb(0, 224, 231);
			}
		}

		.sort_cont {
			width: 90%;
			margin: 20rpx auto;
			background-color: #fff;
			border-radius: 20rpx;

			.cont_item {
				border-bottom: 1rpx solid #DEE4E8;

				.cont_item_detail {
					width: 90%;
					.flex1{
						align-items: center;
					}
					.lock {
						background-color: gray;
						color: gainsboro;
						border-radius: 10rpx;
						width: 100rpx;
						height: 60rpx;
						text-align: center;
						line-height: 60rpx;

					}

					.lockgreen {
						background-color: #E3FDE1;
						color: #509F68;
						border-radius: 10rpx;
						width: 100rpx;
						height: 60rpx;
						text-align: center;
						line-height: 60rpx;

					}
				}
			}
		}
	}

	.detail_info {

		//   width: 100%;
		// height: 475px;
		// position: absolute;
		// left: 0;
		// top: -20px;
		// z-index: -1;
		// height: 400rpx;
		// background: url(../../static/blindbox/f5ee495ebca169a2d0e600d711948ee.jpg) no-repeat center 0rpx;
		// background-position: center 0px;
		// background-size: cover;
		// opacity: 0.8;
		// position: relative;
		.info_top {}

		.info_bottom {
			color: #fff;
			width: 60%;
			position: absolute;
			left: 20%;
			text-align: center;
			bottom: 20rpx;

			.numbox {
				.num {
					border-radius: 10rpx;
					background-color: rgba(255, 255, 255, 0.4);
				}
			}

			image {
				border-radius: 50%;
				width: 50rpx;
				height: 50rpx;
			}
		}
	}

	.userImg {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}


	.btmWrap {
		position: fixed;
		z-index: 10;
		width: 100%;
		bottom: 0;
		background: #fff;
	}

	.buyBtn {
		font-size: 28rpx;
		color: #fff;
		line-height: 80rpx;
		height: 80rpx;
		background: #44ACFF;
		border-radius: 40rpx;
		width: 210rpx;
	}

	.tipsLeft {
		background: #44ACFF;
		color: #2f2f2e;
	}

	.collectImg {
		width: 75%;
		display: block;
		margin: 0 auto;
		height: auto;
		position: relative;
	}

	.topWrap {
		background: url(../../static/detailsBg.png) 0 0 no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 926rpx;
		padding-top: 120rpx;
		position: relative;
	}

	.infoWrap {
		::v-deep  img {
			width: 100% !important;
			height: auto;
		}
	}

	.itemTips {
		font-size: 28rpx;
		background: #DEE4E8 !important;
		border-radius: 40rpx;
	}

	.topContent {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 30rpx;
		z-index: 10;
		width: 100%;
		text-align: center;
	}
</style>
